<!-- 设置线索/来人目标 -->
<template>
  <dt-modal-edit
    ref="setClueOrVisitor"
    :title="title"
    @ok="ok"
    :label-width="100"
    :width="900"
    :showOk="!isCheck"
    :cancelText="isCheck ? '关闭' : '取消'">
    <div class="set-clue-or-visitor">
      <div class="target_mouth">
        <span>目标月份：</span>
        <span>{{ date }}</span>
      </div>
      <div class="tip-text">
        <Icon type="md-alert" :size="18" color="#FAAD14" style="line-height: 26px; margin-right: 10px" />
        <p v-if="setGoalType == 'SET'">
          1.请先完成案场目标设定，再根据案场目标拆分顾问目标。如果当前案场暂无目标，请点击“无需设定”；
          <br />
          <span style="color: #e9142e">
            2.“套数”及“金额”目标为考核必填项，“面积”目标不作考核，可视情况填写；
            <br />
            3.注意：案场目标及顾问目标均需完成设定（包括设为“无需设定”），才视为完成目标设定任务，否则任务责任人将被扣分
          </span>
        </p>
        <p v-else>本月目标已锁定，您可对目标进行调整。系统将记录每次调整的差值</p>
      </div>
      <Tabs ref="setModalTabsRef" v-model="tabStatus" type="card" @on-click="onChangeTab" name="setModalTabs">
        <TabPane label="案场目标" name="case" tab="setModalTabs">
          <div style="margin: 0 0 10px 100px">
            （如需对指定产品进行业绩考核，请点击“关联产品”进行关联。关联后，系统将只以被关联产品统计目标“达成值”）
          </div>
          <dt-info ref="formRef" :options="options" :info="info" :label-width="100"></dt-info>
          <dt-grid ref="goalCount" :columns="columns.count" :list="list.count" :height="100" />
          <dt-grid ref="goalMoney" :columns="columns.money" :list="list.money" :height="100" />
          <dt-grid ref="goalArea" :columns="columns.area" :list="list.area" :height="100" />
        </TabPane>
        <TabPane label="顾问目标" name="counselor" tab="setModalTabs">
          <order-counselor ref="orderCounselor" />
        </TabPane>
      </Tabs>
    </div>
    <adjust-log ref="adjustLogRef" />
  </dt-modal-edit>
</template>

<script>
  import columnOpt from '../opt/setOrderColumns'
  import targetApi from '@/biz/buildingManagement/target'
  import orderCounselor from './orderCounselor.vue'
  import editMgr from '../opt/targetOpt'
  import adjustLog from '@/views/casemanagement/report/goalReach/components/adjustLog.vue'
  export default {
    components: {
      orderCounselor,
      adjustLog
    },
    data() {
      return {
        info: {
          productId: []
        },
        options: [],
        title: '',
        isCheck: true, //区分查看编辑
        settingId: '',
        modalType: '', //区分认购\签约
        setGoalType: '', //区分设定或调整
        date: '',
        tabStatus: 'case',
        caseCopy: {},
        countFlag: true,
        moneyFlag: true,
        counselorList: [], //顾问目标
        columns: {},
        list: {
          count: [],
          money: [],
          area: []
        },
        goalTotal: {
          goalCount: '',
          goalMoney: '',
          goalArea: ''
        },
        areaInitUnit: '' //用于判断调整目标时初始面积输入框\调整面积输入框
      }
    },
    methods: {
      create(data) {
        let caseData = this.$tool.deepClone(data)
        this.title = caseData.curState == 'SUBSCRIPTION' ? '认购目标设定' : '签约目标设定'
        this.date = caseData.date
        this.modalType = caseData.curState
        this.setGoalType = caseData.setGoalType
        this.isCheck = caseData.isCheck
        this.settingId = caseData.housesGoalId
        this.getListData(caseData)
        this.tabStatus = 'case'
        this.$refs.orderCounselor.importFlag = false
        this.init()
      },
      init() {
        this.$refs.setClueOrVisitor.show()
        // this.$refs.edit.init(editMgr.options(this), this.info)
        this.columns = columnOpt.options(this)
      },
      getListData(data) {
        this.info.productId = data.productId
        this.options = editMgr.options(this)
        this.list.count = [data.goalCount]
        this.list.money = [data.goalMoney]
        this.list.area = [data.goalArea]
        if (this.setGoalType == 'SET') {
          this.goalTotal.goalCount = data.goalCount.initUnit
          this.goalTotal.goalMoney = data.goalMoney.initUnit
          this.goalTotal.goalArea = data.goalArea.initUnit
        } else {
          this.areaInitUnit = data.goalArea.initUnit
          this.goalTotal.goalCount = data.goalCount.currentUnit
          this.goalTotal.goalMoney = data.goalMoney.currentUnit
          this.goalTotal.goalArea = data.goalArea.currentUnit
            ? data.goalArea.currentUnit
            : data.goalArea.initUnit
        }
        this.countFlag = String(this.goalTotal.goalCount) != 'null' ? true : false
        this.moneyFlag = String(this.goalTotal.goalMoney) != 'null' ? true : false

        let params = {
          settingId: this.settingId,
          type: targetApi.getTabsType(this.modalType)
        }
        return targetApi.getUserGoalList(params).then((res) => {
          this.counselorList = res
          this.$refs.orderCounselor.importFlag = false
          this.getCounselorData()
        })
      },

      // 无需设定
      noSet(val, key) {
        if (key == 'goalCount') {
          this.countFlag = true
        }
        if (key == 'goalMoney') {
          this.moneyFlag = true
        }
        val.initUnit = '0'
        this.goalTotal[key] = val.initUnit
        this.getCounselorData()
      },
      //设定目标
      targetChange(val, key) {
        let reg = key == 'goalCount' ? /^[0-9]\d*$/ : /^[0-9]+(\.[0-9]{2})?$/
        if (key != 'goalCount') {
          val.initUnit = Number(val.initUnit).toFixed(2)
        } else {
          val.initUnit = Number(val.initUnit).toFixed(0)
        }
        if (val.initUnit || String(val.initUnit) == '0') {
          if (!reg.test(val.initUnit) && key != 'goalArea') {
            this.$Message.error('请输入数值或选择“无需设定”')
            if (key == 'goalCount') {
              this.countFlag = false
            }
            if (key == 'goalMoney') {
              this.moneyFlag = false
            }
            this.goalTotal[key] = 0
          } else {
            this.goalTotal[key] = val.initUnit
            if (key == 'goalCount') {
              this.countFlag = true
            }
            if (key == 'goalMoney') {
              this.moneyFlag = true
            }
            this.getCounselorData()
          }
        } else {
          this.goalTotal[key] = null
          this.$Message.error('请输入数值或选择“无需设定”')
        }
      },
      //调整目标
      adjustChange(val, row, key) {
        let reg = key == 'goalCount' ? /^[0-9]\d*$/ : /^[0-9]+(\.[0-9]{2})?$/
        if (key != 'goalCount') {
          val = Number(val).toFixed(2)
        } else {
          val = Number(val).toFixed(0)
        }
        if (val || String(val) == '0') {
          if (!reg.test(val) && key != 'goalArea') {
            this.$Message.error('请输入数值')
            if (key == 'goalCount') {
              this.countFlag = false
            }
            if (key == 'goalMoney') {
              this.moneyFlag = false
            }
            this.goalTotal[key] = 0
          } else {
            row.dValue = val - Number(row.initUnit) //计算调整差
            this.$refs[key].loadList([{ ...row }])
            this.goalTotal[key] = val
            if (key == 'goalCount') {
              this.countFlag = true
            }
            if (key == 'goalMoney') {
              this.moneyFlag = true
            }
            this.getCounselorData()
          }
        } else {
          this.goalTotal[key] = null
          this.$Message.error('请输入数值')
        }
      },
      //面积调整
      areaChange(val, row, key) {
        val = Number(val).toFixed(2)
        let reg = /^[0-9]+(\.[0-9]{2})?$/
        if (!reg.test(val)) {
          this.goalTotal.goalArea = '0.00'
        } else {
          if (key != 'initUnit') {
            row.dValue = val - Number(row.initUnit) //计算调整差
            this.$refs.goalArea.loadList([{ ...row }])
          }
          this.goalTotal.goalArea = val
          this.getCounselorData()
        }
      },
      onChangeTab(val) {
        //切换tab判断是否填写案场目标
        if (val == 'counselor' && !this.isCheck) {
          if (!this.countFlag || !this.moneyFlag) {
            this.$Message.error('案场目标未设定，请先完成案场目标设定，再根据案场目标拆分顾问目标')
            this.tabStatus = 'case'
            return false
          }
        }
      },
      getCounselorData() {
        let data = {
          modalType: this.modalType,
          counselorList: this.counselorList,
          setGoalType: this.setGoalType,
          settingId: this.settingId,
          isCheck: this.isCheck,
          goalTotal: this.goalTotal
        }
        this.$refs.orderCounselor.init(data)
      },
      //保存提交
      ok() {
        let flag = this.$refs.orderCounselor.tipsFlag
        if (
          Number(this.goalTotal.goalCount) < 0 ||
          Number(this.goalTotal.goalMoney) < 0 ||
          Number(this.goalTotal.goalArea) < 0
        ) {
          this.$Message.error('案场目标不能为负数')
          return false
        }
        if (this.setGoalType == 'SET' && (!this.goalTotal.goalCount || !this.goalTotal.goalMoney)) {
          this.$Message.error('案场目标不能为空')
          return false
        }
        if (this.setGoalType == 'ADJUST' && (!this.goalTotal.goalCount || !this.goalTotal.goalMoney)) {
          this.$Message.error('案场调整目标不能为空')
          return false
        }
        if (!flag) {
          let params = {
            ...this.goalTotal,
            housesGoalId: this.settingId,
            productId: this.info.productId,
            snapshotList: this.$refs.orderCounselor.list
          }
          targetApi.updateOrderGoal(params).then((res) => {
            this.$Message.success('设定成功')
            this.$emit('success')
            this.hide()
          })
        } else {
          this.$Message.error('顾问目标总和需大于或等于案场目标')
        }
      },
      hide() {
        this.$refs.setClueOrVisitor.hide()
      },
      //案场调整记录
      changeLog(row, key) {
        let data = {
          ...row,
          title: '案场目标调整记录',
          type: 'case',
          curState: this.modalType,
          settingId: this.settingId,
          otherState: key
        }
        this.$refs.adjustLogRef.show(data)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .set-clue-or-visitor {
    .target_mouth {
      font-size: 14px;
      color: #333;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .tip-text {
      display: flex;
      padding: 10px;
      background-color: rgba(254, 252, 236, 1);
      margin-bottom: 10px;
    }
  }
</style>
